<script setup lang='ts'>
import axios, { type AxiosResponse } from 'axios'
import { onMounted, ref } from 'vue';
type BannerList = {
    imgUrl: string
}[]
interface Result {
    code: string
    msg: string
    result: BannerList
}
const list = ref<BannerList>([])
// 获取轮播图数据
const getBanner = async () => {
    const res = await axios.get<null, AxiosResponse<Result>>("https://meikou-api.itheima.net/home/banner")
    list.value = res.data.result
}
// 挂载周期
onMounted(() => {
    getBanner()
})
</script>

<template>
    <div class="container">
        <!-- 循环生成谁 就在谁的上面写v-for -->
        <img :key="item.imgUrl" :src="item.imgUrl" alt="" v-for="(item, index) in list">
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 200px;
    display: flex;
}

.container img {
    width: 300px;
    height: 100%;
    margin: 10px 20px;
}
</style>